<template>
  <div class="line-echart">
    <echarts :options="options"></echarts>
  </div>
</template>

<script lan="ts">
import { defineComponent, computed } from "vue";

import echarts from '@/base-ui/echarts/index'

export default defineComponent({
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    goodsSale: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    echarts
  },
  setup(props) {
    const options = computed(() => {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: props.goodsSale.xLabels,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: props.goodsSale.values,
            type: "line",
            areaStyle: {},
          },
        ],
      }
    })
    return {
      options,
    }
  },
})
</script>

<style lang="less" scoped></style>